import React, { forwardRef } from 'react';
import './index.scss';

export interface IconTextProps {
  icon?: string;
  text?: string;
  size?: 'small' | 'medium' | 'large';
  theme?: 'light' | 'dark';
  direction?: 'horizontal' | 'vertical';
  gap?: number;
  onClick?: () => void;
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const IconText = forwardRef<HTMLDivElement, IconTextProps>(function ({
                                                                               icon = '',
                                                                               text = '管理一级',
                                                                               size = 'medium',
                                                                               theme = 'dark',
                                                                               direction = 'horizontal',
                                                                               gap = 8,
                                                                               onClick,
                                                                               style = {},
                                                                               className = '',
                                                                               __designMode,
                                                                               componentId,
                                                                               _componentName,
                                                                               forwardRef: forwardRefProp,
                                                                               ...otherProps
                                                                             }, ref) {

  const handleClick = () => {
    onClick?.();
  };

  const iconTextClassName = [
    'icon-text',
    `size-${size}`,
    `theme-${theme}`,
    `direction-${direction}`,
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={iconTextClassName}
      style={{ gap: `${gap}px`, display: 'inline-flex', flexDirection: direction === 'vertical' ? 'column' : 'row', alignItems: 'center', ...style }}
      onClick={handleClick}
      {...otherProps}
    >
      {icon ? (
        <img className="icon-text-icon" src={icon} alt={text} />
      ) : (
        <div className="icon-text-icon" />
      )}
      {text && <span className="icon-text-label">{text}</span>}
     <div className="distance-wrapper">
       <div className="distance">320,814</div>
       <div className="distance-unit">m</div>
     </div>
    </div>
  );
});

export default IconText;
